<template>
  <div class="push-gcz-res-mnt w-full h-full display-flex-column" style="overflow: hidden">
    <div class="btn-box display-flex" style="justify-content: flex-start">
      <a-button type="primary m-r-sm" @click="loadData">刷新</a-button>
    </div>
    <div class="w-full" style="height: 10px"></div>
    <div class="table-box flex-1" style="overflow: hidden">
      <a-table
        class="dist-box-table"
        bordered
        :rowClassName="setRowClassName"
        :customRow="customRow"
        :loading="table.loading"
        :rowKey="(record, index)=>index"
        :columns="table.columns"
        :data-source="table.dataSource"
        :pagination="table.pagination"
        :scroll="{ x: false, y: 'calc(100% - 70px)' }"
      >
        <template slot="index" slot-scope="text,record,index">
          <div>{{ index + 1 }}</div>
        </template>
        <span slot="operate" slot-scope="text,record">
          <div class="display-flex" style="justify-content: flex-start">
            <a-button type="default" @click="handlerGoToDetail(record)">
              查看详情
            </a-button>
          </div>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
import PageInitFn from '@/api/pageInitFn'

export default {
  name: 'PushGCZResMnt',
  props: {},
  data () {
    return {
      table: {
        columns: [],
        dataSource: [],
        loading: false,
        rowSelection: {
          selectedRowKeys: [],
          selectedRows: [],
          onChange: (selectedRowKeys, selectedRows) => {
            this.table.rowSelection.selectedRowKeys = selectedRowKeys
            this.table.rowSelection.selectedRows = selectedRows
          }
        },
        pagination: {
          pageSize: 20, // 默认每页显示数量
          total: 0,
          current: 1,
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['10', '20', '50', '100', '200', '500'], // 每页数量选项
          showTotal: (total) => `共${total}条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          }
        }
      },
      filter: {
        pageIndex: 1,
        pageSize: 20
      }
    }
  },
  created () {
    this.pageInitFn = new PageInitFn(this)
    this.pageInitFn.created()
  },
  async mounted () {
    this.pageInitFn.mounted()
    this.Event.$on('_REFRESH_TODO_BOX_', this.loadData)
  },
  methods: {
    handlerGoToDetail (record) {
      this.$router.push(
        {
          name: 'ff80808191db3ec00192222b037802b8',
          params: {
            id: record.F_ID
          },
          query: {
            projectId: record.PID,
            itemId: record.ITEMID,
            dealType: record.F_DEALTYPE
          }
        })
    },
    async loadData (filterText = null) {
      this.filterText = filterText || null
      await this.pageInitFn.loadData({})
    },
    setRowClassName (record, index) {
      return this.pageInitFn.setRowClassName(record, 'F_ID')
    },
    customRow (record, index, key) {
      // record.key = key
      return this.pageInitFn.customRow(record, 'F_ID')
    }
  }

}
</script>

<style scoped lang="less">
.push-gcz-res-mnt {
  background-color: white;
  padding: 10px;

}

</style>
